import React from 'react'

import { useDispatch, useSelector } from 'react-redux'

import { increaseAction, decreaseAction, whenOddIncreaseAction, delayIncreaseAction } from '../../store/actions/count_action'

export default function Count() {

  /* const { count } = store.getState().countReducer
  const { movieList } = store.getState().movieReducer */
  const { count } = useSelector(state => state.countReducer)
  const { movieList } = useSelector(state => state.movieReducer)

  const dispatch = useDispatch()

  const increaseBtnHandler = () => {
    dispatch(increaseAction(1))
  }

  const decreaseBtnHandler = () => {
    dispatch(decreaseAction(1))
  }

  const whenOddIncreaseBtnHandler = () => {
    dispatch(whenOddIncreaseAction(1))
  }

  const delayIncreaseBtnHandler = () => {
    dispatch(delayIncreaseAction(1))
  }

  return (
    <div>
      <h2>Count</h2>
      <div>
        <p>Count: {count}</p>
        <p>The number of movie: {movieList.length}</p>
        <button onClick={increaseBtnHandler}>加</button>
        <button onClick={decreaseBtnHandler}>减</button>
        <button onClick={whenOddIncreaseBtnHandler}>偶数加</button>
        <button onClick={delayIncreaseBtnHandler}>延迟加</button>
      </div>
    </div>
  )
}
